<template>
	<vue-content>
		<vue-header>
			<vue-header-button>
		        <el-button type="primary" @click="create">新增</el-button>
		    </vue-header-button>
		</vue-header>
		<vue-body>
	    	<el-table
	        v-loading.body="loading"
	        :data="tableData"
	        border
	        style="width: 100%">
	        <el-table-column
	          prop="productNo"
	          label="商品编号">
	        </el-table-column>
	        <el-table-column
	          prop="serialNumber"
	          label="序号">
	        </el-table-column>
	        <el-table-column
	          label="显示图片">
	          <template scope="scope">
	            <img class="logoImg" :src="imgSrc(scope.row.picUrl)"/>
	          </template>
	        </el-table-column>
	        <el-table-column label="操作">
          <template scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row, tableData)">删除</el-button>
          </template>
      </el-table-column>
	       </el-table>
	       <el-button type="primary" class="insProbtn" @click="back()">后退</el-button>
	    </vue-body>
	    <edit-banner
	      ref="edit-banner"
	      @close="editFinish"
	      :view="view"
	      v-if="view ==='create' || view ==='edit'"/>
   </vue-content>
</template>

<script>
import { queryBanner,deleteBanner} from "@/services/product";
import { imgSrcUrl } from "@/services/imgSrcUrl";
import {RequestError} from '@/services/errors'
import {deepClone} from '@/utilities/object'
import EditBanner from './edit'
export default {
  name: "edit-role",
  components: {EditBanner},
  data: () => ({
      tableData: [],
      baseData:[],
      loading: false,
      productNo:"",
      view: '',
  }),
  props: {},
  created(){
    // 取到路由带过来的参数 
    let routerParams = this.$route.query.productNo;
    // 将数据放在当前组件的数据内
    this.productNo = routerParams;
    this.loadData();
  },
  mounted() {
  },
  methods: {
    async loadData () {
        this.loading = true
        try {
          let data = await queryBanner(this.productNo)
//        console.log(data)
          this.tableData = data
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
    },
    async create () {
        this.view = 'create'
        await this.$nextTick()
        this.$refs['edit-banner'].productNo = this.productNo
    },
    async handleEdit (index, data) {
        this.view = 'edit'
        await this.$nextTick()
        this.$refs['edit-banner'].dialogFormVisible = true
        this.$refs['edit-banner'].formData = deepClone(data)
        this.$refs['edit-banner'].imgShow = 'edit'
    },
    handleDelete (index, data, rows) {
        this.$confirm(`此操作将删除${data.serialNumber}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await deleteBanner({productNo:this.productNo,id:data.id})
            this.$message({
              type: 'success',
              message: '已删除'
            })
            rows.splice(index, 1)
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, '提示', {
                type: 'error',
                confirmButtonText: '确定'
              })
            } else {
              throw e
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    imgSrc(data){
      	return imgSrcUrl() + data;
    },
    editFinish (needRefresh) {
        this.view = ''
        if(needRefresh){
          this.$nextTick(() => {
            // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
            this.loadData()
         	})
        }
    },
    back(){
    	this.$router.go(-1)
    }
  },
  filters: {
      isChecked (value) {
        return {0: 'false', 1: 'true'}[value]
      },
      productType (value) {
        return {1: '实物', 2: '彩票',3:'券/虚拟'}[value]
      }
  }
};
</script>

<style>
	.el-table th>.cell{
		text-align: center;
	}
	.logoImg{
		height: 80px;
	}
	.insProbtn{
		float: right;
		margin-left: 30px;
	}
</style>